<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="串口">
        <el-input v-model="form.port" v-if="form.status" disabled style="width:200px;"></el-input>
        <el-input v-model="form.port" v-else style="width:200px;"></el-input>
      </el-form-item>
      <el-form-item label="波特率">
        <el-select v-model="form.baudRate" placeholder="请选择" v-if="form.status" disabled>
          <el-option v-for="item in baudRateOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-select v-model="form.baudRate" placeholder="请选择" v-else >
          <el-option v-for="item in baudRateOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="停止位">
        <el-select v-model="form.stopBits" placeholder="请选择" v-if="form.status" disabled>
          <el-option v-for="item in stopBitsOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-select v-model="form.stopBits" placeholder="请选择" v-else >
          <el-option v-for="item in stopBitsOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据位">
        <el-select v-model="form.dataBits" placeholder="请选择" v-if="form.status" disabled>
          <el-option v-for="item in dataBitsOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-select v-model="form.dataBits" placeholder="请选择" v-else >
          <el-option v-for="item in dataBitsOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="校验位">
        <el-select v-model="form.parity" placeholder="请选择" v-if="form.status" disabled>
          <el-option v-for="item in parityOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-select v-model="form.parity" placeholder="请选择" v-else >
          <el-option v-for="item in parityOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="串口操作">
        <el-button @click="onOpenSerial" :type="btnOpenType">{{btnOpenText}}</el-button>
      </el-form-item>
    </el-form>
    <el-input
      type="textarea"
      :rows="2"
      placeholder="请输入内容"
      v-model="recvBuf">
    </el-input>
  </div>
</template>

<script>
// import TerminalView from '@/components/TerminalView'

const SerialPort = require('serialport')
const Readline = require('@serialport/parser-readline')
export default {
  components: {
  },
  data() {
    return {
      btnOpenText: '打开串口',
      btnOpenType: 'success',
      port: null,
      baudRateOptions: [
        { label: '9600', value: 9600 },
        { label: '115200', value: 115200 }
      ],
      stopBitsOptions: [
        { label: '1', value: 1 },
        { label: '1.5', value: 1.5 },
        { label: '2', value: 2 }
      ],
      dataBitsOptions: [
        { label: '8', value: 8 },
        { label: '7', value: 7 },
        { label: '6', value: 6 },
        { label: '5', value: 5 }
      ],
      parityOptions: [
        { label: 'none', value: 'none' },
        { label: 'even', value: 'even' },
        { label: 'mark', value: 'mark' },
        { label: 'odd', value: 'odd' },
        { label: 'space', value: 'space' }
      ],
      recvBuf: '',
      form: {
        port: 'COM1',
        status: false,

        baudRate: 115200,
        stopBits: 1,
        dataBits: 8,
        parity: 'none'
      }
    }
  },
  created() {
    console.log()
    this.scanSerial()
  },
  methods: {
    scanSerial() {
      SerialPort.list().then((ports, err) => {
        if (err) {
          this.$message(err.message)
          return
        } else {
          console.log('查询成功', ports)
        }
        console.log('ports', ports)

        if (ports.length === 0) {
          this.$message('No ports discovered')
        }
      })
    },
    onOpenSerial() {
      // 检测串口是否开启，如果开启，关闭串口
      if (this.port) {
        if (this.port.isOpen) {
          this.port.close((err) => {
            if (err) {
              this.$message({
                type: 'error',
                message: String(err)
              })
            } else {
              this.btnOpenText = '打开串口'
              this.btnOpenType = 'success'
            }
          })
          this.form.status = false
          return
        }
      }
      const port = new SerialPort(this.form.port, {
        baudRate: this.form.baudRate,
        stopBits: this.form.stopBits,
        dataBits: this.form.dataBits,
        parity: this.form.parity,
        autoOpen: false
      })
      port.open((err) => {
        if (err) {
          this.$message({
            type: 'error',
            message: String(err)
          })
        } else {
          this.btnOpenText = '关闭串口'
          this.btnOpenType = 'danger'
        }
      })
      port.on('open', (err) => {
        if (err) {
          this.$message({
            type: 'error',
            message: String(err)
          })
        } else {
          this.$message({
            type: 'success',
            message: `Serial ${this.form.port} Open Success!`
          })
          this.form.status = true
        }
      })
      const parser = port.pipe(new Readline())
      parser.on('data', this.onPortReadline)
      // parser.on('data', (data) => {
      //   console.log(data)
      // })
      this.port = port
    },
    onPortReadline(data) {
      // this.recvBuf.push({date: 'xx', buf: '' + data})
      this.recvBuf += data
      console.log(this.recvBuf)
      console.log(data)
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

